Optimize auto theme bundle size by 0.90 KB by Copilot · Pull Request #1 · dido739/overtype

Copilot · 2026-02-13T15:22:15Z

Auto theme feature added ~3KB to bundle size. This PR reduces the impact to ~2KB through code consolidation and shared listener pattern.

Bundle Impact

Before: 98.01 KB
After: 97.11 KB
Reduction: 0.90 KB

Changes

Single global listener pattern

Replace per-instance MediaQueryList listeners with single shared listener
Track instances in Set, notify all on system theme change
Auto-cleanup when last instance destroyed

// Before: Each instance created its own listener
_setupAutoThemeListener() {
  this.autoThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  this.autoThemeListener = (event) => { /* ... */ };
  this.autoThemeMediaQuery.addEventListener('change', this.autoThemeListener);
}

// After: Single global listener shared across instances
_setupAuto() {
  OverType._autoInstances.add(this);
  if (!OverType._mq) {
    OverType._mq = window.matchMedia('(prefers-color-scheme: dark)');
    OverType._mqListener = (e) => {
      OverType._autoInstances.forEach(inst => inst._applyTheme(e.matches ? 'cave' : 'solar'));
    };
    OverType._mq.addEventListener('change', OverType._mqListener);
  }
}

Consolidated DOM queries

Extract _updateThemeAttrs() helper to eliminate duplicate querySelectorAll calls
Single DOM traversal for theme updates across containers, wrappers, and web components

Cached media query

Cache window.matchMedia('(prefers-color-scheme: dark)') in themes.js
Reuse in resolveAutoTheme() and getSystemColorScheme()

Method name compression

Rename private methods for better minification: _setupAutoThemeListener → _setupAuto, _applyGlobalResolvedTheme → _applyGlobalTheme, etc.

Code deduplication

Consolidate listener add/remove with optional chaining: (mq.addEventListener || mq.addListener)?.call()
Extract common theme application logic

Backward Compatibility

Public API unchanged. Both instance.setTheme('auto') and OverType.setTheme('auto') work identically.

Original prompt

Goal

Optimize the bundle size of the auto theme feature to reduce the overall size increase from ~3KB to ~2KB or less.

Context

PR panphora#100 added an auto theme feature that automatically switches between light and dark themes based on system preferences. While the feature works well, it added approximately 3KB to the bundle size (95KB → 98KB). We can optimize this to maintain competitive bundle sizes.

Optimization Tasks

1. Refactor to Single Global Auto Theme Listener

Current Issue: Each instance with auto theme creates its own media query listener, causing memory overhead and redundant code.

Solution:

Use a single global media query listener

Track auto-themed instances in a Set

Notify all instances when system theme changes

Clean up the listener when the last instance is destroyed

Files to modify:

src/overtype.js - Refactor _setupAutoThemeListener() and _cleanupAutoThemeListener()

2. Consolidate DOM Queries in Theme Application

Current Issue: Multiple querySelectorAll calls for different selectors in _applyGlobalResolvedTheme()

Solution:

Combine selector queries where possible

Cache query results if used multiple times in the same function

Files to modify:

src/overtype.js - Optimize _applyGlobalResolvedTheme()

3. Simplify Theme Resolution Logic

Current Issue: resolveAutoTheme() function is called repeatedly and includes redundant checks

Solution:

Inline the resolution where possible

Cache the media query object

Remove duplicate window.matchMedia checks

Files to modify:

src/themes.js - Optimize resolveAutoTheme()

src/overtype.js - Use optimized resolution

4. Shorten Private Method Names

Current Issue: Verbose private method names like _setupAutoThemeListener, _cleanupAutoThemeListener, _applyResolvedTheme

Solution:

Shorten to _setupAuto(), _cleanupAuto(), _applyTheme() (they're private, so brevity is fine)

Better minification results

Files to modify:

src/overtype.js - Rename methods

5. Reduce Code Duplication in Theme Application

Current Issue: Theme application logic is duplicated between instance and global levels

Solution:

Create a shared helper function for applying resolved themes

Reuse the logic in both contexts

Files to modify:

src/overtype.js - Extract common theme application logic

Expected Results

Reduce bundle size increase from ~3KB to ~2KB or less

Maintain all existing functionality

Improve performance with single global listener

Better memory efficiency

Testing Requirements

All existing auto theme tests must pass

Manual testing of auto theme switching

Verify no memory leaks with instance creation/destruction

Test both instance-level and global-level auto theme settings

Check bundle size with npm run build

Files to Update

src/overtype.js - Main optimization work

src/themes.js - Simplify resolution logic

Rebuild dist/ files after changes

Update any relevant comments/documentation

This pull request was created from Copilot chat.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: dido739 <152557154+dido739@users.noreply.github.com>

Initial plan

cf2fc9f

Copilot AI assigned Copilot and dido739 Feb 13, 2026

Copilot started work on behalf of dido739 February 13, 2026 15:22 View session

Copilot AI and others added 5 commits February 13, 2026 15:23

Initial exploration complete - ready to optimize auto theme bundle size

a3a833c

Co-authored-by: dido739 <152557154+dido739@users.noreply.github.com>

Optimize auto theme: global listener, shorter names, reduced duplication

b72e020

Co-authored-by: dido739 <152557154+dido739@users.noreply.github.com>

Further optimize listener registration with optional chaining

c1a8f9d

Co-authored-by: dido739 <152557154+dido739@users.noreply.github.com>

Extract setTheme helper and optimize web component updates

ccd9e41

Co-authored-by: dido739 <152557154+dido739@users.noreply.github.com>

Fix web component setAttribute call and add clarifying comments

451e957

Co-authored-by: dido739 <152557154+dido739@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Optimize bundle size of auto theme feature~~ Optimize auto theme bundle size by 0.90 KB Feb 13, 2026

Copilot AI requested a review from dido739 February 13, 2026 15:33

Copilot finished work on behalf of dido739 February 13, 2026 15:33

dido739 marked this pull request as ready for review February 13, 2026 17:52

dido739 approved these changes Feb 13, 2026

View reviewed changes

dido739 merged commit 0ad0b5a into main Feb 13, 2026

dido739 mentioned this pull request Feb 13, 2026

feat: add auto theme functionality to OverType editor panphora/overtype#100

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Optimize auto theme bundle size by 0.90 KB#1

Optimize auto theme bundle size by 0.90 KB#1
dido739 merged 6 commits intomainfrom
copilot/optimize-auto-theme-bundle-size

Copilot AI commented Feb 13, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Single global listener pattern

Consolidated DOM queries

Cached media query

Method name compression

Code deduplication

Backward Compatibility

Goal

Context

Optimization Tasks

1. Refactor to Single Global Auto Theme Listener

2. Consolidate DOM Queries in Theme Application

3. Simplify Theme Resolution Logic

4. Shorten Private Method Names

5. Reduce Code Duplication in Theme Application

Expected Results

Testing Requirements

Files to Update

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Feb 13, 2026 •

edited

Loading